<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>custom</title>
  <style>
    ul {
      list-style-type: none;
    }

    li::before {
      display:inline-block;
      width: 1rem;
      height: 1rem;
      margin-right: 0.25rem;
      content:"";
    }

    .open::before, .closed::before {
      background-size: 1rem 1rem;
      position: relative;
      top: 0.25rem;
      opacity: 0.3;
    }

    .open::before {
      background-image: url(img/down.png);
    }

    .closed::before {
      background-image: url(img/right.png);
    }

    .closed .closed::before,
    .closed .open::before {
      display: none;
    }
  </style>
</head>
<body>

<p is="word-count"></p>
<popup-info
    img="https://mdn.github.io/web-components-examples/popup-info-box-web-component/img/alt.png"
    data-text="Your card validation code (CVC) is an extra security feature — it is the last 3 or 4 numbers on the back of your card.">
</popup-info>
<ul is="expanding-list">
  <li class="open"><span style="cursor: pointer;">UK
            </span><ul style="display: block;">
    <li class="open"><span style="cursor: pointer;">Yorkshire
                    </span><ul style="display: block;">
      <li class="open"><span style="cursor: pointer;">Leeds
                            </span><ul style="display: block;">
        <li>Train station</li>
        <li>Town hall</li>
        <li>Headrow</li>
      </ul>
      </li>
      <li>Bradford</li>
      <li>Hull</li>
    </ul>
    </li>
  </ul>
  </li>
  <li class="open"><span style="cursor: pointer;">USA
            </span><ul style="display: block;">
    <li class="open"><span style="cursor: pointer;">California
                    </span><ul style="display: block;">
      <li>Los Angeles</li>
      <li>San Francisco</li>
      <li>Berkeley</li>
    </ul>
    </li>
    <li>Nevada</li>
    <li>Oregon</li>
  </ul>
  </li>
</ul>
<ul>
  <li>Not</li>
  <li>an</li>
  <li>expanding</li>
  <li>list</li>
</ul>
<div>
  <button class="add">Add custom-square to DOM</button>
  <button class="update" disabled="">Update attributes</button>
  <button class="remove" disabled="">Remove custom-square from DOM</button>
</div>


<script src="custom-element.js"></script>
<script src="./pop-up-info.js"></script>
<script src="./expanding-list.js"></script>
<script src="life-cycle-callbacks.js"></script>

</body>
</html>
